<template>
  <div class="contentColor detailWrap">
    <div class="swiperWrap">
      <view class="count">{{ imgLength }}/{{ currentSwiper }}</view>
      <swiper
        class="swiper"
        indicator-dots
        autoplay
        circular
        @change="handlerSwiper"
      >
        <swiper-item v-for="(item, index) in detail.goods_images" :key="index">
          <img :src="item.external_url" alt="" />
        </swiper-item>
      </swiper>
    </div>
    <!-- 产品描述 -->
    <div class="goodsName"></div>
    <!-- 服务 -->
    <div class="services" @click="openServices">
      <view class="left">
        <view class="servicesItem"
          ><uni-icons
            custom-prefix="iconfont"
            type="icon-zhengque"
            size="26"
            color="#FA2209"
          ></uni-icons
          >七天无理由退款</view
        >
        <view class="servicesItem"
          ><uni-icons
            custom-prefix="iconfont"
            type="icon-zhengque"
            size="26"
            color="#FA2209"
          ></uni-icons
          >七天无理由退款</view
        >
      </view>
      <view class="right"> &gt; </view>
    </div>
    <!-- 评论 -->
    <view class="comment"> </view>
    <!-- 富文本 -->
    <div class="describle">
      <p class="title">产品描述</p>
      <!-- <rich-text :nodes='detail.content' class="richText" ></rich-text> -->
      <div v-html="detail.content" class="richText" type="node"></div>
    </div>

    <!-- 服务弹出层 -->
    <uni-popup ref="services" type="bottom">
      <view class="servicesMore">
        <view class="title">
          服务
          <span @click="$refs.services.close()">x</span>
        </view>
      </view>
    </uni-popup>
    <!-- 购物车菜单 -->
    <view class="goodsNav">
      <uni-goods-nav
        :fill="true"
        :options="options"
        :buttonGroup="buttonGroup"
        @click="handleGoodsLeft"
        @buttonClick="handleGoodsRight"
      />
    </view>
    <!-- 购物车菜单弹出遮罩 -->
    <AddBuy ref="add" :imgUrl='imgUrl'></AddBuy>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import AddBuy from './components/AddBuy.vue'
export default {
  onLoad({ goodsId }) {
    this.goodsId = goodsId;
    this.getDetial();
  },
  data() {
    return {
      currentSwiper: 1,
      goodsId: 0,
      detail: {},
      options: [
        {
          icon: "home",
          text: "首页",
          infoBackgroundColor: "#007aff",
          infoColor: "red",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 0,
        },
      ],
      buttonGroup: [
        {
          text: "加入购物车",
          backgroundColor: "#ff0000",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ],
    };
  },
  components: {
    AddBuy,
  },
  computed: {
     ...mapState('user',['token']),
    imgUrl(){
    return this.detail.goods_images?this.detail.goods_images[0].external_url:''
    },
    imgLength() {
      return this.detail.goods_images?.length;
    },
   
  },
  methods: {
    handleGoodsLeft({ index }) {
      if (index === 0) {
        uni.switchTab({ url: "/pages/index/index" });
      } else {
        uni.switchTab({ url: "/pages/cart/index" });
      }
    },
    handleGoodsRight({index}) {
        if(index===0){
        this.$refs.add.open()
       
        }else{

        }
    },
    openServices() {
      this.$refs.services.open("bottom");
    },
    async getDetial() {
      const {
        data: { detail },
      } = await this.$request.get("/goods/detail", { goodsId: this.goodsId });
      this.detail = detail;
    },
    handlerSwiper({ detail }) {
      this.currentSwiper = detail.current + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.detailWrap {
  min-height: 100vh;
}
.comment {
  height: 406rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.swiper {
  width: 100vw;
  height: 100vw;
}
.swiperWrap {
  position: relative;
  .count {
    position: absolute;
    z-index: 999;
    width: 80rpx;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.363);
    text-align: center;
    border-radius: 20rpx;
    color: #fff;
    font-size: 26rpx;
    line-height: 40rpx;
    right: 40rpx;
    bottom: 80rpx;
  }
}
.goodsName {
  margin: 20rpx;
  background-color: #fff;
  height: 200rpx;
}
.services {
  height: 100rpx;
  padding: 24rpx 30rpx;
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  .left {
    display: flex;
    .servicesItem {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
    }
  }

  .right {
    text-align: right;
    font-size: 30rpx;
    font-family: "宋体";
    font-weight: 700;
    line-height: 48rpx;
  }
}
.describle {
  background-color: #fff;
  padding-top: 20rpx;
  .title {
    padding-left: 40rpx;
  }
  .richText {
    padding: 0 20rpx;
    background-color: #f1f1f1;
    ::v-deep {
      p {
        background-color: #f1f1f1 !important;
      }
      img {
        width: 80%;
      }
    }
  }
}
.servicesMore {
  height: 540rpx;
  width: 100%;
  background-color: #fff;
  // position: absolute;
  // bottom: 0;
  border-radius: 50rpx 50rpx 0 0;
  padding-top: 20rpx;
  .title {
    height: 40rpx;
    text-align: center;
    font-weight: 800;
    position: relative;
    span {
      position: absolute;
      right: 50rpx;
      font-size: 36rpx;
      font-weight: 700;
    }
  }
}
.goodsNav {
  position: sticky;
  bottom: 0;
  ::v-deep {
    .uni-icons {
      font-size: 44rpx !important;
    }
    .uni-tab__cart-button-right {
      border-radius: 36rpx;
      // height: ;
    }
  }
}
</style>